/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { Suspense } from 'react'
import { BrowserRouter, Navigate, Routes, Route } from 'react-router-dom'
import router from './router/index'
function App() {
  const render = (arr: any) => {
    return arr && arr.map((item: any, index: number) => {
      return <Route key={index} path={item.path}
        element={item.element ? <item.element></item.element> : <Navigate to={item.to}></Navigate>}>
        {
          item.children && render(item.children)
        }
      </Route>
    })
  }
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          {render(router)}
        </Routes>
      </Suspense>
    </BrowserRouter>
  )
}
export default App
